<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="searchInpt"
        placeholder="输入ID/昵称/手机号"
        clearable
        @keyup.enter.native="search()"
        class="search-btn"
      >
        <el-button
          type="primary"
          @click="search()"
          icon="el-icon-search"
          slot="append"
          :loading="searchLoading"
        >搜索</el-button>
      </el-input>
      <div class="lz-tips">
        <label>千人计划:</label>
      </div>
      <el-select
        v-model="thousandPlanStatusValue"
        placeholder="千人计划"
        @change="search()"
      >
        <el-option
          v-for="item in thousandPlanStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="lz-tips">
        <label>用户筛选:</label>
      </div>
      <el-select
        v-model="userStatusValue"
        placeholder="用户筛选"
        @change="search()"
      >
        <el-option
          v-for="item in userStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="table_container">
      <el-table
        border
        v-loading="tableloading"
        :data="thousandPlanData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          prop="userId"
          label="用户ID"
        >
        </el-table-column>
        <el-table-column
          prop="hardwareEquipment"
          label="设备号"
        >
        </el-table-column>

        <el-table-column
          prop="nickName"
          label="昵称"
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="手机号"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              class="lz-success"
              type="text"
              @click="planStatus(scope.row)"
              size="small"
              v-if="scope.row.activityStatus == 0"
            >已参与</el-button>
            <el-button
              class="lz-danger"
              type="text"
              @click="planStatus(scope.row)"
              size="small"
              v-else
            >未参与</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          v-if="pageshow"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchThousandPlanStatus, fetchThousandPlanUpdate } from "@/api/table";

export default {
  data() {
    return {
      tableloading: false,
      count: 0,
      limit: 20,
      currentPage: 1,
      thousandPlanData: [
        {
          hardwareEquipment: "10:CE:A9:30:1E:B9",
          nickName: "无语奇葩",
          privacyStatus: 1,
          activityStatus: 0,
          userName: "13966652742",
          userId: 911
        }
      ],
      thousandPlanStatus: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "已参加"
        },
        {
          value: "1",
          label: "未参加"
        }
      ],
      userStatusValue: "",
      userStatus: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "正式用户"
        },
        {
          value: "1",
          label: "测试用户"
        }
      ],
      thousandPlanStatusValue: "",
      searchInpt: "",
      searchLoading: false,
      pageshow: true
    };
  },
  mounted() {
    this.getThousandPlanStatus();
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getThousandPlanStatus();
    },
    planStatus(data) {
      let planText = "";
      if (data.activityStatus == "1") {
        planText = "确认将此用户改为已参加？";
      } else {
        planText = "确认将此用户改为未参加？";
      }
      this.$confirm(planText, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.planStatusData(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    search() {
      this.currentPage = 1;
      this.pageshow = false;
      this.getThousandPlanStatus();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    async planStatusData(data) {
      let statusData;
      if (data.activityStatus == null || data.activityStatus == 0) {
        statusData = 1;
      } else {
        statusData = 0;
      }
      const res = await fetchThousandPlanUpdate({
        thousandPlanStatus: statusData,
        userId: data.userId
      });

      if (res.status == 200) {
        this.$message({
          type: "success",
          message: "已修改!"
        });
        this.getThousandPlanStatus();
      } else {
        this.$message({
          type: "info",
          message: "修改失败!"
        });
      }
    },
    async getThousandPlanStatus() {
      this.tableloading = true;
      this.thousandPlanData = [];
      const planStatusData = await fetchThousandPlanStatus({
        userStatus: this.userStatusValue,
        activityStatus: this.thousandPlanStatusValue,
        key: this.searchInpt,
        pageSize: this.limit,
        pageNo: this.currentPage
      });
      this.searchLoading = false;
      this.tableloading = false;
      this.thousandPlanData = [];
      this.count = planStatusData.data.total;
      planStatusData.data.list.forEach(item => {
        const plan = {};
        plan.activityStatus = item.activityStatus;
        plan.hardwareEquipment = item.hardwareEquipment;
        plan.nickName = item.nickName;
        plan.privacyStatus = item.privacyStatus;
        plan.userId = item.userId;
        plan.userName = item.userName;
        this.thousandPlanData.push(plan);
      });
    }
  }
};
</script>
